import React from 'react';
import { Card, Form, Input, Button, message ,Icon,Checkbox} from 'antd'
const FormItem = Form.Item


class FormLogin extends React.Component {


  handleSubmit = () => {
    let userInfo = this.props.form.getFieldsValue()
    this.props.form.validateFields((err, values) => {

      if (!err) {
        message.success(`${userInfo.userName} 通过`)
      }
    })
  }
  render() {
    console.log(this.props.form)
    const { getFieldDecorator } = this.props.form

    return (
      <div className="login" style={{ width: 100 + '%' }}>
        <Card title="登录行内表单">
          <Form layout="inline">
            <FormItem>
              <Input placeholder="请输入用户名" />
            </FormItem>
            <FormItem>
              <Input placeholder="请输入密码" />
            </FormItem>
            <FormItem>
              <Button>登录</Button>
            </FormItem>
          </Form>
        </Card>

        <Card title="水平表单">
          <Form style={{ width: 300 }}>
            <FormItem>
              {getFieldDecorator('userName', {
                initialValue: '',
                rules: [{
                  required: true,
                  message: '用户名不能为空'
                }]
              })(
                <Input  prefix={<Icon type="user"/>} placeholder="请输入用户名" />
              )
              }
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                initialValue: '',
                rules: [{
                  required: true,
                  message: '密码不能为空'
                }]
              })(
                <Input  prefix={<Icon type="lock"/>} placeholder="请输入密码" />
              )
              }
            </FormItem>

            <FormItem>
              {
                getFieldDecorator('remember',{
                  valuePropName:'checked',
                  initialValue: true,
                  rules:[]
                })(
                  <Checkbox >记住密码</Checkbox>
                )
              }
              <a href="#">忘记密码</a>
            </FormItem>

            <FormItem>
              <Button type="primary" onClick={this.handleSubmit}>登录</Button>
            </FormItem>
          </Form>
        </Card>
      </div>
    )
  }
}
export default Form.create()(FormLogin);